<template>
  <div>
    <div class="colContent progress" style=" ">
      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item :label="$t('项目名称')" prop="dealName">
          <el-input
            v-model="queryParams.dealName"
            :placeholder="$t('项目名称')"
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <!-- <el-form-item :label="$t('负责人')" prop="personChargeName">
          <el-input v-model="queryParams.personChargeName" :placeholder="$t('负责人')" clearable />
        </el-form-item> -->
        <el-form-item :label="$t('负责人')" prop="personCharge">
          <userSelect
            v-model="queryParams.personCharge"
            size="small"
            :placeholder="$t('负责人')"
            clearable
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <el-form-item :label="$t('聚焦行业')" prop="industry">
          <el-select v-model="queryParams.industry" :placeholder="$t('聚焦行业')" clearable>
            <el-option
              v-for="dict in industryFocusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
        </el-form-item>
      </el-form>
      <el-row v-if="!readonly" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['deal:track:edit']"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addHandle"
          >{{ $t("新增") }}</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="exportHandle"
          >{{ $t("导出") }}</el-button>
        </el-col> -->
      </el-row>
      <el-table ref="table" v-loading="loading" :row-class-name="rowClassName" :data="trackInfoList" max-height="600" border @row-click="rowClick">
        <el-table-column align="center" prop="dealName" :label="$t('项目名称')" show-overflow-tooltip min-width="180">
          <template slot-scope="scope">
            <router-link
              target="_blank"
              :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
              :style="scope.row.lastMonth ? '' : 'color:red'"
              class="link_a"
            >{{ scope.row.dealName }}</router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="personChargeName" :label="$t('负责人')" min-width="90" />
        <el-table-column align="center" prop="dealStage" :label="$t('阶段')" min-width="90" />
        <el-table-column v-if="hiddenColumn" :label="$t('最近一周')" min-width="250" prop="lastWeek" class-name="alinTop">
          <template slot-scope="scope">
            <div class="progressTimeLine">
              <el-row v-for="(item, index) in scope.row.lastWeek" :key="index">
                <div size="mini" class="progressItem" @click="viewTrack(item)">
                  <div v-if="item.msgCount > 1" class="msgCount">
                    <svg-icon icon-class="message" />
                    <span class="icon">{{ item.msgCount }}</span>
                  </div>
                  <p class="tit">
                    <span class="text">{{ formatText(item.details) }}</span>
                  </p>
                  <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                  <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                  <div class="bottom">
                    <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                    <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                  </div>
                  <div class="bottom">
                    <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                    <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                  </div>
                </div>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="hiddenColumn" :label="$t('上一周')" min-width="250" prop="pastWeek" class-name="alinTop">
          <template slot-scope="scope">
            <div class="progressTimeLine">
              <el-row v-for="(item, index) in scope.row.pastWeek" :key="index">
                <div size="mini" class="progressItem" @click="viewTrack(item)">
                  <div v-if="item.msgCount > 1" class="msgCount">
                    <svg-icon icon-class="message" />
                    <span class="icon">{{ item.msgCount }}</span>
                  </div>
                  <p class="tit">
                    <span class="text">{{ formatText(item.details) }}</span>
                  </p>
                  <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                  <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                  <div class="bottom">
                    <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                    <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                  </div>
                  <div class="bottom">
                    <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                    <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                  </div>
                </div>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('历史三次跟踪')" min-width="250" prop="historyNearlyThree">
          <template slot-scope="scope">
            <div class="progressTimeLine">
              <el-row v-for="(item, index) in scope.row.historyNearlyThree" :key="index">
                <div size="mini" class="progressItem" @click="viewTrack(item)">
                  <div v-if="item.msgCount > 1" class="msgCount">
                    <svg-icon icon-class="message" />
                    <span class="icon">{{ item.msgCount }}</span>
                  </div>
                  <p class="tit">
                    <span class="text">{{ formatText(item.details) }}</span>
                  </p>
                  <el-tag v-if="item.itemType" size="mini">{{ itemTypeFormat(item.itemType) }}</el-tag>
                  <el-tag v-if="item.trackMode" type="warning" size="mini">{{ trackModeFormat(item.trackMode) }}</el-tag>
                  <div class="bottom">
                    <p v-if="item.user" class="peo">{{ item.user.nickName }}</p>
                    <p v-if="item.happenTime" class="time">{{ parseTime(item.happenTime) }}</p>
                  </div>
                  <div class="bottom">
                    <p v-if="item.createTime" class="peo">{{ $t('创建时间') }}</p>
                    <p v-if="item.createTime" class="time">{{ item.createTime }}</p>
                  </div>
                </div>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column :label="$t('全部跟踪信息')" align="center" min-width="120">
          <template slot-scope="scope">
            <el-button size="mini" class="el-button el-button--text el-button--small" @click="trackList(scope.row)">{{ $t('查看全部') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('项目风险')" align="center" min-width="120">
          <template slot-scope="scope">
            <el-button size="mini" class="el-button el-button--text el-button--small" @click="riskList(scope.row)">{{ $t('查看全部') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('项目阶段')" align="center" prop="dealStage" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <span>{{ $t(scope.row.dealStage) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('项目状态')" align="center" prop="dealStatus" show-overflow-tooltip min-width="100" :formatter="statusFormat" />
        <el-table-column :label="$t('创建人')" align="center" prop="createBy.nickName" min-width="90" />
        <el-table-column :label="$t('创建时间')" align="center" prop="createTime" min-width="110">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="pageChangeHandle"
      />
    </div>

    <!-- <el-dialog :title="trackListTitle" :visible.sync="trackListOpen" width="80%" :close-on-click-modal="false" :lock-scroll="false" @close="closeDialog">
      <dealTrackList ref="dealTrackList" />
    </el-dialog>

    <el-dialog :title="$t('项目风险')" :visible.sync="riskListOpen" width="80%" :close-on-click-modal="false" :lock-scroll="false">
      <dealRiskList ref="dealRiskList" :deal-id="dealId" />
    </el-dialog> -->

    <!-- 添加或修改项目跟踪对话框 -->
    <el-dialog :title="title" :visible.sync="formOpen" :close-on-click-modal="false" custom-class="dialogForm" :lock-scroll="false" append-to-body>
      <dealTrackForm ref="dealTrackForm" :deal-id="dealIdList[0]" />
    </el-dialog>
  </div>
</template>
<script>
import { estateTrackInfo } from '@/api/deal/track/dealTrack'
// import dealTrackList from '@/views/deal/track/dealTrackList'
// import dealRiskList from '@/views/deal/risk/dealRiskList'
import dealTrackForm from './dealTrackForm'
export default {
  components: {
    // dealTrackList,
    // dealRiskList,
    dealTrackForm
  },
  props: {
    dealIdList: {
      type: Array,
      default: () => []
    },
    readonly: {
      type: Boolean,
      false: () => false
    }
  },
  data() {
    return {
      // table表格数据
      trackInfoList: [],
      // 遮罩层
      loading: false,
      trackListOpen: false,
      // 查看项目跟踪标题
      trackListTitle: '',
      riskListOpen: false,
      formOpen: false,
      title: '',
      // 总条数
      total: 0,
      // 事项类型 字典item_type字典
      itemTypeOptions: [],
      // 跟踪方式 字典track_mode字典
      trackModeOptions: [],
      myChart: null,
      dealStatus: [],
      queryParams: {
        dealName: undefined,
        personChargeName: undefined,
        dealStatus: undefined,
        trackTime: undefined,
        levelConcern: undefined,
        pageNum: 1,
        pageSize: 10,
        dealIds: undefined
      },
      dealId: undefined,
      hiddenColumn: true,
      currentTrack: null,
      dealStatusOptions: [],
      industryFocusOptions: []
    }
  },
  watch: {
    dealIdList: {
      handler(val) {
        if (val && val.length > 0) {
          this.getList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getDicts('item_type').then(response => {
      this.itemTypeOptions = response.data
    })
    this.getDicts('track_mode').then(response => {
      this.trackModeOptions = response.data
    })
    this.getDicts('deal_status').then(res => {
      this.dealStatusOptions = res.data
    })
    this.getDicts('deal_industry_focus').then(response => {
      this.industryFocusOptions = response.data
    })
    // this.getList()
  },
  mounted: function() {

  },

  methods: {
    rowClassName({ row }) {
      if (this.currentTrack !== null && row.dealId === this.currentTrack.dealId) {
        return 'current-row'
      } else {
        return ''
      }
    },
    pageChangeHandle() {
      this.getList()
      this.$refs.table.bodyWrapper.scrollTop = 0
    },
    // 事项类型 字典item_type字典翻译
    itemTypeFormat(row) {
      return this.selectDictLabel(this.itemTypeOptions, row)
    },
    // 跟踪方式 字典track_mode字典翻译
    trackModeFormat(row) {
      return this.selectDictLabel(this.trackModeOptions, row)
    },
    getList() {
      this.queryParams.dealIds = undefined
      this.loading = true
      this.hiddenColumn = !this.queryParams.trackTime
      this.queryParams.dealStatus = this.dealStatus.join(',')
      if (this.dealIdList && this.dealIdList.length > 0) {
        this.queryParams.dealIds = this.dealIdList + ''
        console.log(this.queryParams)
        estateTrackInfo(this.queryParams).then(response => {
          this.trackInfoList = response.rows
          this.total = response.total
          this.loading = false
        })
      } else {
        this.trackInfoList = []
          this.total = 0
          this.loading = false
      }
    },
    statusFormat(row) {
      return this.selectDictLabel(this.dealStatusOptions, row.dealStatus)
    },
    trackList(row) {
      this.trackListOpen = true
      this.trackListTitle = row.dealName + ' - ' + this.$t('项目跟踪')
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealTrackList.queryParams.dealId = row.dealId
        this.$refs.dealTrackList.getList()
      })
    },
    riskList(row) {
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.dealId = row.dealId
        this.riskListOpen = true
        this.$refs.dealRiskList.getList()
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.dealStatus = []
      this.queryHandle()
    },
    formatText(htmlStr) {
      if (!htmlStr) return ''
      return htmlStr.replace(/<\/?.+?>/g, '').replace(/ /g, '').replace(/&nbsp;/ig, '')
    },
    viewTrack(item) {
      this.formOpen = true
      this.title = this.$t('项目跟踪')
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealTrackForm.init(item)
      })
    },
    // 关闭dialog时的回调
    closeDialog() {
      this.getList()
    },
    /** 新增按钮操作 */
    addHandle() {
      this.formOpen = true
      this.title = this.$t('项目跟踪')
      this.$nextTick(() => {
        this.$refs.dealTrackForm.initDealIdList(this.dealIdList)
        this.$refs.dealTrackForm.init(this.currentTrack)
      })
    },
    /** 导出按钮操作 */
    exportHandle() {
      this.downLoadExcel('/track/dealTrack/exportReport', this.queryParams)
    },
    // 点击当前行
    rowClick(row) {
      if (this.currentTrack !== null && row.dealId === this.currentTrack.dealId) {
        this.$refs.table.setCurrentRow(null)
        this.currentTrack = null
      } else {
        this.$refs.table.setCurrentRow(row)
        this.currentTrack = row
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.text{
  /* autoprefixer: off */
  display:-webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  /* autoprefixer: on */
  max-height: 50px
}
.msgCount{
  position: relative;
  display: inline-block;
  float: right;
  padding: 0 3px 0 0;
  margin-left: 10px;
  .icon{
    background-color: #f56c6c;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    right: -8px;
    top: -3px;
    zoom: 0.9;
  }
}
</style>
